<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <canvas style="border: 1px solid black;" id="myCanvas" width="1000" height="1000"></canvas>
    <script>
        window.onload = function () {
            let c = document.getElementById("myCanvas");
            // 2d为二维绘图
            let ctx = c.getContext("2d");
            // js画线段
            ctx.beginPath();
            // 画矩形
            ctx.fillStyle = "red";
            // 从坐标（10，10）开始，画一个矩形，长宽分别为100，100
            ctx.fillRect(10, 10, 100, 50);
            // 描边
            ctx.strokeStyle = "blue";
            ctx.strokeRect(0, 0, 50, 25)
            ctx.closePath();

            // js画线段
            ctx.beginPath();
            // 起点坐标（100，100）
            ctx.moveTo(100, 100);
            ctx.closePath();

            //
            ctx.lineTo(100, 20);
            // 画弧线(150, 20, 150, 70, 50)为圆弧的起点、终点、半径
            ctx.arcTo(150, 20, 150, 70, 50);
            ctx.lineTo(150, 120);
            ctx.stroke()

            // 圆弧
            for (let index = 0; index < 15; index++) {
                ctx.strokeStyle = "green"
                ctx.beginPath()
                // 圆弧的起点坐标、半径、起始角度、终止角度、是否逆时针
                ctx.arc(100, 100, index * 10, 0, Math.PI * 5 / 3, false)
                ctx.stroke()
                ctx.closePath();
            }
        }
    </script>
</body>

</html>